<template>
  <div class="common-layout">
    <div class="search-box">
      <el-input v-model="searchValue" placeholder="搜索" class="search-input" />
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="primary" @click="reset" style="margin-right: 30px">重置</el-button>
    </div>
    <div class="table-box">
      <el-table :data="paginatedData" border>
        <el-table-column prop="order" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="原始图片" align="center">
          <template #default="{ row }">
            <el-image :src="row.startImage" style="width: 100px; height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="处理后图片" align="center">
          <template #default="{ row }">
            <el-image :src="row.endImage" style="width: 100px; height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="style" label="处理风格" align="center"></el-table-column>
        <el-table-column prop="address" label="拍摄地点" align="center"></el-table-column>
        <el-table-column prop="time" label="拍摄时间" align="center"></el-table-column>
        <el-table-column prop="type" label="图片类型" align="center"></el-table-column>
        <el-table-column prop="user" label="处理用户" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" @click="viewImage(row)">查看</el-button>
            <el-button type="danger" @click="deleteImage(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-box">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 查看图片 -->
    <el-dialog title="查看图片" v-model="visible" width="60%" :close-on-click-modal="false">
      <el-row gutter="10">
        <el-col :span="12" class="col-item">
          <el-image :src="selectedImage?.startImage" style="width: 100%; height: auto"> </el-image>
          <h1>原始图片</h1>
          <el-button
            type="primary"
            @click="downloadImage(selectedImage?.startImage)"
            style="margin-bottom: 20px"
            >下载</el-button
          >
        </el-col>
        <el-col :span="12" class="col-item">
          <el-image :src="selectedImage?.endImage" style="width: 100%; height: auto"></el-image>
          <h1>处理后图片</h1>
          <el-button type="primary" @click="downloadImage(selectedImage?.endImage)">下载</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form>
            <el-form-item label="处理用户:">
              {{ selectedImage?.user }}
            </el-form-item>
            <el-form-item label="图片类型:">
              {{ selectedImage?.type }}
            </el-form-item>
            <el-form-item label="处理风格:">
              {{ selectedImage?.style }}
            </el-form-item>
            <el-form-item label="拍摄地点:">
              {{ selectedImage?.address }}
            </el-form-item>
            <el-form-item label="拍摄时间:">
              {{ selectedImage?.time }}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { saveAs } from 'file-saver'

const visible = ref(false)
const selectedImage = ref(null)
const searchValue = ref('')
const currentPage = ref(1)
const pageSize = ref(5)
const tableData = ref([
  {
    order: 1,
    startImage: 'https://img.yzcdn.cn/vant/apple-1.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-1.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '风景',
    user: '张三',
  },
  {
    order: 2,
    startImage: 'https://img.yzcdn.cn/vant/apple-2.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-2.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '风景',
    user: '李四',
  },
  {
    order: 3,
    startImage: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '风景',
    user: '王五',
  },
  {
    order: 4,
    startImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '人文',
    user: 'wowo ',
  },
  {
    order: 5,
    startImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '人文',
    user: 'wowo ',
  },
  {
    order: 6,
    startImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '人文',
    user: 'wowo ',
  },
  {
    order: 7,
    startImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '人文',
    user: 'wowo ',
  },
  {
    order: 8,
    startImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    endImage: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    style: '风景',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '人文',
    user: 'wowo ',
  },
])

const totalItems = computed(() => tableData.value.length)

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return tableData.value.slice(start, end)
})

const search = () => {
  console.log('searchValue', searchValue.value)
}
const reset = () => {
  searchValue.value = ''
}
const viewImage = (row) => {
  console.log('查看', row)
  selectedImage.value = row
  visible.value = true
}
const deleteImage = (row) => {
  console.log('删除', row)
}
const handleSizeChange = (size) => {
  pageSize.value = size
}
const handleCurrentChange = (page) => {
  currentPage.value = page
}
const downloadImage = (url) => {
  fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
      const filename = url.substring(url.lastIndexOf('/') + 1)
      saveAs(blob, filename)
    })
}
</script>

<style scoped>
.common-layout {
  padding: 20px;
  overflow: auto;
}
.search-box {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-top: -20px;
  gap: 20px;
  .search-input {
    width: 400px;
  }
}
.table-box {
  margin-right: 20px;
  margin-top: 20px;
  height: 780px;
  overflow: auto;
}
.bottom-box {
  margin-right: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
.col-item {
  border: 1px solid #d7d9df;
}
</style>
